<template>
  <view class="statis">
	 <view class="ranking">
	 	<text class="integral">当前积分<text class="question">?</text></text>
		<text class="integralNum">1289</text>
		<text class="rankingNum">/排名--</text>
	 </view>
	<view class="chart">
		<view class="chartsMemory">
			<text>遗忘曲线</text>
			<view class="charts-box">
			  <qiun-data-charts
			    type="line"
			    :chartData="chartData"
			    :ontouch="true"
			  />
			</view>
		</view>
		<view class="chartsMemory">
			<text>知识点掌握情况</text>
			<view class="charts-box1">
			  <qiun-data-charts
			    type="scatter"
			    :chartData="chartData1"
			    :ontouch="true"
			    background="none"
			  />
			</view>
		</view>
		<view class="chartsMemory">
			<text>课程能力值</text>
			<view class="testHeader">
				<view :class="navIndex===1?'activeView':''" @click="checkIndex(1)">
					能力比
				</view>
				<view :class="navIndex===2?'activeView':''" @click="checkIndex(2)">
					日(h)
				</view>
				<view :class="navIndex===3?'activeView':''" @click="checkIndex(3)">
					周(天)
				</view>
				<view :class="navIndex===4?'activeView':''" @click="checkIndex(4)">
					月(天)
				</view>
			</view>
			<view class="content" v-if="navIndex==1">
				<view class="charts-box2">
				  <qiun-data-charts
				    type="radar"
				    :chartData="chartData2"
				    background="none"
				  />
				</view>
			</view>
			<view class="content" v-if="navIndex==2">
				<view class="charts-box3">
				  <qiun-data-charts
				    type="radar"
				    :chartData="chartData3"
				    background="none"
				  />
				</view>
			</view>
			<view class="content" v-if="navIndex==3">
				<view class="charts-box3">
				  <qiun-data-charts
				    type="radar"
				    :chartData="chartData4"
				    background="none"
				  />
				</view>
			</view>
			<view class="content" v-if="navIndex==4">
				<view class="charts-box3">
				  <qiun-data-charts
				    type="radar"
				    :chartData="chartData5"
				    background="none"
				  />
				</view>
			</view>
		</view>
		<view class="chartsMemory">
			<text>课程正确率</text>
			<view class="charts-box3">
			  <qiun-data-charts
			    type="column"
			    :chartData="chartData6"
			    background="none"
			  />
			</view>
		</view>
	</view>
  </view>
</template>

<script>
 
export default {
	
  data() {
    return {
		navIndex:1,
		chartData1:{
		  categories:[],
		  series:[
			    {
			               "name": "已掌握的知识点",
			               "data": [
			                   [
			                       10,
			                       8.04
			                   ],
			                   [
			                       8.07,
			                       6.95
			                   ],
			                   [
			                       13,
			                       7.58
			                   ],
			                   [
			                       9.05,
			                       8.81
			                   ],
			                   [
			                       11,
			                       8.33
			                   ],
			                   [
			                       14,
			                       7.66
			                   ],
			                   [
			                       13.4,
			                       6.81
			                   ],
			                   [
			                       10,
			                       6.33
			                   ],
			                   [
			                       11,
			                       8.33
			                   ],
			                   [
			                       14,
			                       7.66
			                   ],
			                   [
			                       11,
			                       8.33
			                   ],
			                   [
			                       12.5,
			                       6.82
			                   ]
			               ]
			           },
			           {
			               "name": "知识点",
			               "data": [
			                   [
			                       9.15,
			                       7.2
			                   ],
			                   [
			                       11.5,
			                       7.2
			                   ],
			                   [
			                       3.03,
			                       4.23
			                   ],
			                   [
			                       12.2,
			                       7.83
			                   ],
			                   [
			                       2.02,
			                       4.47
			                   ],
			                   [
			                       1.05,
			                       3.33
			                   ],
			                   [
			                       11.5,
			                       7.2
			                   ],
			                   [
			                       3.03,
			                       4.23
			                   ],
			                   [
			                       12.2,
			                       7.83
			                   ],
			                   [
			                       2.02,
			                       4.47
			                   ],
			                   [
			                       7.08,
			                       5.82
			                   ],
			                   [
			                       5.02,
			                       5.68
			                   ]
			               ]
			           }
		  ],
		},
		chartData:{
		  categories:[
			  "0",
			          "1",
			          "2",
			          "3",
			          "4",
			          "5",
			          "6"
		  ],
		  series:[
			{
			    "name": "你的遗忘曲线",
			    "data": [
			        20,
			        17,
			        15,
			        13,
			        10,
			        7,
			         5
			    ]
			 },
			{
			    "name": "艾宾浩斯遗忘曲线",
			     "data": [
			        100,
			        58.2,
		            44.2,
			        35.8,
			        33.7,
			        27.8,
			        25.4
			    ]
			}
		  ],
		},
        chartData2:{
          "categories": [
                  "学科1",
                  "学科2",
                  "学科3",
                  "学科4",
                  "学科5",
                  "学科6"
              ],
              "series": [
                  {
                      "name": "能力值",
                      "data": [
                          90,
                          10,
                          65,
                          95,
                          87,
                          72
                      ]
                  }
              ]
        },
	    chartData3:{
	      "categories": [
	              "学科1",
	              "学科2",
	              "学科3",
	              "学科4",
	              "学科5",
	              "学科6"
	          ],
	          "series": [
	              {
	                  "name": "时间占比",
	                  "data": [
	                      8,
	                      5,
	                      0,
	                      4,
	                      7,
	                      2
	                  ]
	              }
	          ]
	    },
		chartData4:{
		  "categories": [
		          "学科1",
		          "学科2",
		          "学科3",
		          "学科4",
		          "学科5",
		          "学科6"
		      ],
		      "series": [
		          {
		              "name": "时间占比",
		              "data": [
		                  8,
		                  5,
		                  4,
		                  4,
		                  9,
		                  12
		              ]
		          }
		      ]
		},
		chartData5:{
		  "categories": [
		          "学科1",
		          "学科2",
		          "学科3",
		          "学科4",
		          "学科5",
		          "学科6"
		      ],
		      "series": [
		          {
		              "name": "时间占比",
		              "data": [
		                  15,
		                  25,
		                  30,
		                  24,
		                  19,
		                  12
		              ]
		          }
		      ]
		},
	    chartData6:{
	        "categories": [
	              "学科1",
	              "学科2",
	              "学科3",
	              "学科4",
	              "学科5",
	              "学科6"
	          ],
	          "series": [
	              {
	                  "name": "正确率（天）",
	                  "data": [
	                      35.3,
	                      36,
	                      31,
	                      43.5,
	                      13,
	                      34
	                  ]
	              },
	              {
	                  "name": "正确率（周）",
	                  "data": [
	                      18,
	                      27,
	                      21,
	                      24,
	                      6,
	                      28
	                  ]
	              }
	          ]
	    },
	}
  },
  onLoad() {
    
  },
  methods: {
	  checkIndex(index){
	  	this.navIndex=index;
	  }
  }
};
</script>

<style lang="scss">
.statis{
	font-family: "微软雅黑"!important;
	background: #e5e5e5;
	letter-spacing: 1px;
	box-shadow: 0 -400rpx 200rpx 0 #d5d5d5;
	padding: 20rpx;
	.ranking{
		height: 200rpx;
		background: #3a45ef;
		color: #fff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		padding: 40rpx 20rpx 0 20rpx ;
	    .integral{
			display: block;
			font-size: 18px;
			margin-bottom: 20rpx;
			.question{
				display: inline-block;
				width: 40rpx;
				height: 40rpx;
				border: 1px solid #fff;
				border-radius: 50%;
				text-align: center;
				line-height: 40rpx;
				font-size: 16px;
				margin-left: 10rpx;
			}
		}
		.integralNum{
			font-size: 60rpx;
			color: #efed3a;
		}
	}
	
	.chart{
		color: #838383;
		.chartsMemory{
			display: flex;
			flex-wrap: wrap;
			background: #fff;
			margin-bottom: 20rpx;
			border-radius: 20rpx;
			overflow: hidden;
			text{
				display: block;
				width: 100%;
				padding: 20rpx;
				font-size: 36rpx;
			}
			.testHeader{
				display: flex;
				justify-content: space-between;
				margin-left: 20rpx;
				view{
					margin-right: 40rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					color: #c6c6c6;
				}
				.activeView{
					border-bottom: 1px solid #dfdfdf;
					color: #52a57a;
				}
			}
			.charts-box{
			  margin-top: 20rpx;
			  margin-right: 40rpx;
			  height:540rpx;
			}
		}
	}
	.charts-box1{
	  margin-top: 20rpx;
	  height:540rpx;
	}
	.charts-box2{
	  width: 700rpx !important;
	   height:580rpx;
	}
	.charts-box3{
	 width: 700rpx !important;
	  height:580rpx;
	}
}
</style>